<template>
    <div>
        <div style="height: 15px"></div>
        <div class="commonStyle nyContent">
            <div class="table-operator">
                <a-button type="primary" @click="syncSysServer">同步微服务</a-button>
            </div>
            <a-table :columns="columns" :dataSource="loadData" :rowKey="record => record.id"
                     :pagination="false">
                <span slot="index" slot-scope="text, record, index">
                    {{ (page.pageNo - 1) * page.pageSize + index + 1 }}
                </span>
                <span slot="online" slot-scope="text" :style="text === '1'?'color:green':'color:red'">
                    {{text === '1'?'在线':'离线'}}
                </span>
                <span slot="operation" slot-scope="text" class="table-operation">
                    <a @click="$refs.addEdit.showEdit(text)">修改</a>
                </span>
            </a-table>
            <Page :totalCount="page.total" :currentPage="page.pageNo" ref="page"
                  :pageSize="page.pageSize" @changePage="changePage" @changePageSize="changePageSize" />
        </div>
        <pl-lazy :time="500">
            <add-edit
                    ref="addEdit"
                    @init="init"
            />
        </pl-lazy>
        <div class="spinBox" v-if="spinning">{{spinText}}</div>
    </div>
</template>

<script>
    import verify from 'libs/verify'
    import addEdit from './addEdit.vue'
    import { mapState } from 'vuex'
    import Page from 'module/pagination'
    import Util from '@/libs/util'
    import ellipsis from 'module/ellipsis'
    export default {
        name: 'sysServer',
        components: {
            addEdit,
            Page,
            ellipsis
        },
        data () {
            return {
                form: this.$form.createForm (this),
                verify,
                spinning:false,
                spinText:'请稍后...',
                array: [ 10, 20, 30, 40 ],
                /*选中的记录*/
                selectedRowKeys: [],
                page: {
                    total:0,
                    pageNo: 1,
                    pageSize: 10,
                },
                loadData: [],
                columns: [
                    {title: '序号', key: 'index', width: '7%', align: 'center', scopedSlots: {customRender: 'index'}},
                    {title: '微服务名称', dataIndex: 'name', key: 'name',width: '15%',},
                    {title: '微服务标识', dataIndex: 'code', key: 'code',width: '15%',},
                    {title: '在线状态', dataIndex: 'online', key: 'online',width: '15%', scopedSlots: {customRender: 'online'}},
                    {title: '同步时间', dataIndex: 'syncTime', key: 'syncTime',width: '17%',},
                    {title: '操作', key: 'operation', width: '13%', scopedSlots: {customRender: 'operation'}}
                ],
                saveGroupFlag:false,
            }
        },
        computed: {
            ...mapState ({
                formStyle: state => state.common.formStyle,
            })
        },
        created () {
            let _this = this
            this.syncSysServer ()
        },
        methods: {
            emitEmpty (partant,name) {
                this[partant][name] = ''
                this.init();
            },
            reStore () {
                this.page.groupName = ''
                this.page.pageNo = 1
                this.init ()
            },
            /** 过滤输入框输入的特殊字符* */
            formatEnterContent (  partant, name,value ) {
                this[ partant ][ name ] = Util.clearSpecialChart (value)
            },

            /*
             * 只能输入数字
             * */
            removeSpecialChart ( partant, name ) {
                let b = this[ partant ][ name ]
                b = b.replace (/[^/a-zA-Z0-9-]/ig, '')
                if (b.length > 32) {
                    b = b.substring (0, 32)
                }
                this[ partant ][ name ] = b
            },
            getAllListFun(){
                let _this = this
                let prams = {
                    groupName: '',
                }
                _this.$post ('group/findAllGroupList', prams).then (res => {
                    if (res.code === 0) {
                        this.$store.dispatch('setGroupListAll',res.data)
                    } else {
                        _this.$message.error (res.message)
                    }
                    _this.spinning = false
                })
            },

            syncSysServer(){
                let _this = this
                let prams = {
                    groupName: '',
                }
                _this.spinning = true
                _this.$post ('sysserver/syncSysServer').then (res => {
                    if (res.code === 0) {
                        _this.$message.success (res.message)
                    } else {
                        _this.$message.error (res.message)
                    }
                    _this.init()
                    _this.spinning = false
                }).catch(e=>{
                    _this.init()
                    _this.spinning = false
                })
            },

            /**
             * Function    : init
             * Description : 初始化列表
             * Input       : none
             * Return      : none
             */
            init () {
                let _this = this
                _this.spinning = true
                _this.$get ('sysserver/findSysServers', this.page).then (res => {
                    _this.loadData = res.rows
                    _this.page.total = res.total
                    _this.spinning = false
                })
            },
            /**
             * Function    : changePage
             * Description : 切换页码
             * Input       : val
             * Return      : none
             */
            changePage ( val ) {
                this.page.pageNo = val
                this.init ()
            },

            /**
             * Function    : changePageSize
             * Description : 切换每页条数
             * Input       : vm
             * Return      : none
             */
            changePageSize ( vm ) {
                this.page.pageSize = vm
                this.page.pageNo = 1
                this.init ()
            },

            /**
             * Function    : handleSubmit
             * Description : 查询按钮
             * Input       : none
             * Return      : none
             */
            handleSubmit () {
                this.page.pageNo = 1
                this.init ()
            },
            /**
             * Function    : deleteGroup
             * Description : 删除分组
             * Input       : none
             * Return      : none
             */
            deleteGroup ( text ) {
                this.$confirm ({
                    title: `确定删除 ${text.groupName} 分组吗?`,
                    okText: '确定',
                    cancelText: '取消',
                    onOk: () => {
                        let _this = this
                        _this.spinning = true
                        _this.$post ('group/deleteGroup', {ids: text.id}).then (res => {
                            if (res.code === 0) {
                                if (_this.loadData.length === 1 && _this.page.pageNo > 1) {
                                    _this.page.pageNo = _this.page.pageNo - 1
                                }
                                _this.init ()
                                _this.$message.success (`删除${text.groupName}分组成功！`)
                            }else {
                                _this.$message.error (res.message)
                            }
                            _this.spinning = false
                        }).catch((e) => {
                            _this.spinning = false
                        })
                    }
                })
            },

        },
        destroyed() {

        }
    }
</script>

